<template>
  <div>
    <div :class="roomType == 1 ? 'ver-room-positon':'c-p-l24 c-pa'" class="c-flex-column c-pz99">
      <div class="c-opacity0 c-flex-row c-aligni-end fadeInLeft" v-for="(item,index) in dynamicList" :key="index" v-if="item.msgType == 73 && (showReward==1||showReward==0?true:showReward==2 &&(item.jiguangUserName == jmUserName||userRole == 2 || userRole == 4 || userRole == 6)?true:false)">
        <div class="msg-box c-ph6 c-pv6 c-flex-row c-mt20 c-pr40 c-ww410 c-flex-center c-aligni-center">
          <img class="c-ww58 c-hh58 c-brp50 imgCloseBig" :src="$addXossFilter(item.content.split('ckjr*rjkc')[4], require('@/assets/no_login_head.png'))" alt="">
          <div class="c-ml14 c-flex-grow1">
            <div class="c-fc-f2 c-fs24 c-ww200 c-text-ellipsis1">{{item.jiguangUserName == jmUserName ? '你': item.dynamicName || item.realName || item.userName}}</div>
            <div class="c-fc-white c-fs16 c-flex-row c-aligni-center"><span>打赏了</span><span class="c-ww70 c-textAlign-c c-text-ellipsis1">{{item.content.split('ckjr*rjkc')[0] == jmUserName ? '你' : item.content.split('ckjr*rjkc')[1]}}</span><span>{{item.content.split('ckjr*rjkc')[3]?item.content.split('ckjr*rjkc')[3]:''}}</span></div>
          </div>
          <div class="c-ww64 c-hh64"><img class="c-maxh c-maxw c-m-0auto" :src="$addXossFilter(item.subContent)" alt=""></div>
        </div>
        <div class="heartBeat c-flex-row c-aligni-end">
          <div class="c-pb10">
            <img class="c-hh30 msg-xnumber" src="@/assets/i/wap/rewordTeacher/X.png" alt="">
          </div>
          <div v-for="(item,index) in item.content.split('ckjr*rjkc')[2]" :key="index">
            <div class="c-pb10">
              <img class="c-hh50 live-time-people msg-number" :src="$addXossFilter(mapNumber[item])" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "rewordTeacher",
  props: {
    rewordList: {
      type: Array,
      default: () => []
    },
    showReward: {
      type: Number,
      default: 0
    },
    jmUserName: {
      type: Number,
      default: 0
    },
    userRole: {
      type: Number,
      default: 1
    },
    roomType: {
      type: Number,
      default: 0,
    }
  },
  data() {
    return {
      rewardList: [],
      dynamicList: [],
      mapNumber: {
        0: require('@/assets/i/wap/rewordTeacher/0.png'),
        1: require('@/assets/i/wap/rewordTeacher/1.png'),
        2: require('@/assets/i/wap/rewordTeacher/2.png'),
        3: require('@/assets/i/wap/rewordTeacher/3.png'),
        4: require('@/assets/i/wap/rewordTeacher/4.png'),
        5: require('@/assets/i/wap/rewordTeacher/5.png'),
        6: require('@/assets/i/wap/rewordTeacher/6.png'),
        7: require('@/assets/i/wap/rewordTeacher/7.png'),
        8: require('@/assets/i/wap/rewordTeacher/8.png'),
        9: require('@/assets/i/wap/rewordTeacher/9.png'),
      },
      time: [],
      change: [],
      timeIndex: 0
    };
  },
  watch: {
    rewordList(val) {
      this.dynamicList.push(this.rewordList[this.rewordList.length - 1])
      console.log(this.dynamicList)
      this.changeList()
    }
  },
  methods: {
    changeList() {
      let that = this
      let index = that.timeIndex
      if (that.dynamicList.length > 5) {
        clearTimeout(that.time[index])
        that.dynamicList.shift()
      } else {
        that.time[index] = setTimeout(function () {
          that.dynamicList.shift()
          clearTimeout(that.time[index])
        }, 3000)
        that.timeIndex = that.timeIndex + 1
      }
    }
  }
};
</script>

<style scoped>
.msg-box {
  height: 1.6rem;
  border-radius: 0.85rem 0px 0px 0.85rem;
  background: url("../../../assets/reward-bg.png") no-repeat center;
  background-size: 100%;
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 0.5;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
.ver-room-positon{
  position: fixed;
  bottom: 11rem;
  left: 0.5rem;
}
</style>
